<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <title>any4dh 数字人交互系统</title>
    
    <!-- 外部样式表 -->
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/a4a.css">

</head>
<body>
    <div class="container">
        <div class="header">
            <h1>any4dh 数字人交互系统</h1>
            <p>基于 Wav2Lip 的实时交互数字人</p>
        </div>

        <div class="app-container">
            <!-- 视频区域 -->
            <div class="app-main">
                <div class="video-container" style="position: relative;">
                    <!-- 原始视频流（隐藏） -->
                    <video id="videoElement" style="display: none; width: 100%; height: 100%; object-fit: contain;" autoplay playsinline></video>

                    <!-- 背景层 -->
                    <div id="backgroundLayer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f0f2f5; background-size: cover; display: none;"></div>

                    <!-- 绿幕处理Canvas -->
                    <canvas id="processedCanvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; display: none;"></canvas>

                    <!-- 占位消息 -->
                    <div class="placeholder-message" id="placeholderMessage">
                        <i class="layui-icon layui-icon-video" style="font-size: 48px;"></i>
                        <p>视频流将在此显示</p>
                        <p style="font-size: 14px; margin-top: 10px;">请先点击"立即连接"按钮</p>
                    </div>
                </div>
            </div>

            <!-- 控制面板 -->
            <div class="app-sidebar">
                <div class="sidebar-section">
                    <h3><i class="fas fa-plug"></i> 连接控制</h3>
                    <div class="controls-panel">
                        <div class="chat-controls">
                            <div class="chat-status">
                                <div class="status-indicator status-disconnected" id="connection-status"></div>
                                <span id="status-text">未连接</span>
                            </div>
                        </div>
                        <button class="layui-btn layui-btn-primary layui-btn-fluid" id="connectBtn">
                            <i class="fas fa-plug"></i> 连接数字人
                        </button>
                        <button class="layui-btn layui-btn-danger layui-btn-fluid" id="disconnectBtn" style="display: none;">
                            <i class="fas fa-stop"></i> 断开连接
                        </button>
                    </div>
                </div>

                <div class="sidebar-section">
                    <h3><i class="fas fa-comments"></i> 文本交互</h3>
                    <div class="message-input-container">
                        <textarea id="messageText" placeholder="输入要与数字人对话的文本..." class="layui-textarea" disabled></textarea>
                        <div class="input-actions">
                            <button class="layui-btn layui-btn-fluid input-actions-btn" id="sendMessage" disabled>
                                <i class="fas fa-paper-plane"></i> 发送消息
                            </button>
                        </div>
                    </div>
                </div>

                <div class="sidebar-section">
                    <h3><i class="fas fa-magic"></i> 绿幕设置</h3>
                    <form class="layui-form" lay-filter="greenScreenForm">
                        <div class="green-screen-controls">
                        <div class="layui-form-item">
                            <label class="layui-form-label">启用绿幕</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="open" lay-skin="switch" lay-filter="enableGreenScreen" lay-text="开启|关闭" id="enableGreenScreen">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">目标颜色</label>
                            <div class="layui-input-block">
                                <input type="color" id="keyColor" value="#00ff00" class="layui-input" style="height: 38px;">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">检测阈值</label>
                            <div class="layui-input-block">
                                <div class="layui-slider" id="thresholdSlider" lay-filter="threshold"></div>
                                <div class="slider-value">
                                    <span id="thresholdValue">160</span>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">边缘平滑</label>
                            <div class="layui-input-block">
                                <div class="layui-slider" id="smoothingSlider" lay-filter="smoothing"></div>
                                <div class="slider-value">
                                    <span id="smoothingValue">5</span>
                                </div>
                            </div>
                        </div>         
         
                        <div class="layui-form-item">
                            <label class="layui-form-label">背景图片</label>
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid" id="uploadBg">
                                    <i class="layui-icon layui-icon-upload"></i> 选择背景图片
                                </button>
                                <input type="file" id="bgImageInput" accept="image/*" style="display: none;">
                            </div>
                        </div>   
                        <div class="layui-form-item">
                            <button type="button" class="layui-btn layui-btn-fluid layui-btn-primary layui-border-green" id="resetGreenScreen">
                                <i class="layui-icon layui-icon-refresh"></i> 重置设置
                            </button>
                        </div>
                      </div>
                    </form>
                </div>

                <div class="sidebar-section">                    
                    <h3><i class="fas fa-microphone"></i> 语音对话</h3>
                    <div class="layui-form-item">
                        <div id="voiceChatHistory" class="voice-chat-history">
                            <div class="voice-chat-placeholder">
                                <i class="layui-icon layui-icon-dialogue"></i>
                                <span>语音对话记录将显示在这里</span>
                            </div>
                        </div>
                    </div>
                    <div class="voice-chat-controls">
                        <div class="layui-form-item">
                            <div class="layui-form" lay-filter="streamingForm">
                                <input type="checkbox" name="streaming" lay-skin="switch" lay-text="流式模式|标准模式" lay-filter="enableStreaming" id="enableStreaming" checked>
                                <div class="layui-form-mid layui-word-aux">
                                    <i class="layui-icon layui-icon-about" title="流式模式可以更快听到AI回复"></i>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button type="button" class="layui-btn layui-btn-fluid layui-btn-danger" id="voiceRecordBtn">
                                <i class="layui-icon layui-icon-record"></i> 开始录音
                            </button>
                        </div>
                    </div>
                </div>

                <div class="sidebar-section">
                    <h3><i class="fas fa-info-circle"></i> 系统信息</h3>
                    <div class="layui-timeline">
                        <div class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis layui-icon-circle"></i>
                            <div class="layui-timeline-content layui-text">
                                <h3 class="layui-timeline-title">系统状态</h3>
                                <p id="system-info">等待发送消息...</p>
                            </div>
                        </div>
                        <div class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis layui-icon-circle"></i>
                            <div class="layui-timeline-content layui-text">
                                <h3 class="layui-timeline-title">模型信息</h3>
                                <p>Wav2Lip 256x256</p>
                            </div>
                        </div>
                        <div class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis layui-icon-circle"></i>
                            <div class="layui-timeline-content layui-text">
                                <h3 class="layui-timeline-title">绿幕性能</h3>
                                <div id="green-screen-info" style="font-size: 12px; color: var(--text-secondary);">
                                    绿幕状态: 禁用<br>
                                    FPS: 0<br>
                                    渲染: Canvas 2D
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/layui/layui.js"></script>
    <script src="/static/js/index/dh/green-screen.js"></script>
    <script src="/static/js/index/dh/dashboard.js"></script>

    </body>
</html>